<template>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
       viewBox="0 0 100 100"
       preserveAspectRatio="xMidYMid">
    <rect x="17" y="29.5" width="16" height="41" fill="#0b60b3">
      <animate attributeName="y" repeatCount="indefinite" dur="1.25s" calcMode="spline" keyTimes="0;0.5;1"
               values="15.149999999999999;29.5;29.5" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.25s"></animate>
      <animate attributeName="height" repeatCount="indefinite" dur="1.25s" calcMode="spline" keyTimes="0;0.5;1"
               values="69.7;41;41" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.25s"></animate>
    </rect>
    <rect x="42" y="29.5" width="16" height="41" fill="#1089ff">
      <animate attributeName="y" repeatCount="indefinite" dur="1.25s" calcMode="spline" keyTimes="0;0.5;1"
               values="18.737499999999997;29.5;29.5" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.125s"></animate>
      <animate attributeName="height" repeatCount="indefinite" dur="1.25s" calcMode="spline" keyTimes="0;0.5;1"
               values="62.525000000000006;41;41" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.125s"></animate>
    </rect>
    <rect x="67" y="29.5" width="16" height="41" fill="#70b8ff">
      <animate attributeName="y" repeatCount="indefinite" dur="1.25s" calcMode="spline" keyTimes="0;0.5;1"
               values="18.737499999999997;29.5;29.5" keySplines="0 0.5 0.5 1;0 0.5 0.5 1"></animate>
      <animate attributeName="height" repeatCount="indefinite" dur="1.25s" calcMode="spline" keyTimes="0;0.5;1"
               values="62.525000000000006;41;41" keySplines="0 0.5 0.5 1;0 0.5 0.5 1"></animate>
    </rect>
  </svg>
</template>

<script>
export default {
  name: 'loading02'
}
</script>
